import { useEffect, useRef } from "react";
import styles from './index.module.less'; // 添加样式表导入
import { useNavigate, useParams } from "react-router-dom";
import { useCallback } from "react";
import useGuestChannels from "@pages/home/hooks/useGuestChannels";
export default function GuestChannel() {

    // 获取路由参数
    const { cid } = useParams();
    // 获取用于实现页面跳转的方法
    const navigate = useNavigate();
    // 获取访客频道列表
    const guestChannels = useGuestChannels();
    // 初始化滚动容器 ref
    const scrollContainerRef = useRef<HTMLDivElement>(null);

    // 获取访客频道列表对应的 DOM 对象
    const guestChannelDOM = useRef<Record<number, HTMLDivElement>>({});
    // 添加滚动处理函数
    const scrollHandler = useCallback((element: HTMLDivElement) => {
        // 实现滚动逻辑...
    }, []);

    // 检测高亮频道id变化
    useEffect(() => {
        // 获取高亮频道对应的 DOM 对象
        if (typeof cid !== "undefined") {
            const currentDOM = guestChannelDOM.current[Number(cid)];
            // 如果 DOM 对象不存在, 阻止程序继续运行
            if (typeof currentDOM === "undefined") return;
            // 设置高亮频道滚动位置
            scrollHandler(currentDOM);
        }
    }, [cid, guestChannelDOM, scrollHandler]);

    // 渲染视图
    return (
        <div className={styles.list} ref={scrollContainerRef}>
            {guestChannels.map((channel:any) => (
                <div
                    key={channel.id}
                    ref={(element) => {
                        if (element) {
                            guestChannelDOM.current[channel.id] = element;
                        }
                    }}
                    onClick={(event) => scrollHandler(event.currentTarget)}
                >
                    {channel.name}
                </div>
            ))}
        </div>
    );
}